<template>
    <u-popup mode="bottom" v-model="show"  >
        <div class="title">款式选择</div>
        <u-tabs
            :list="tabs"
            :current="current"
            @change="change"
            active-color="#222222"
            bar-width="72"
            :bar-style="{ backgroundColor: '#F25A27' }"
        ></u-tabs>

        <view class="content">
            <scroll-view scroll-y="true" style="height: 422rpx">
                <view
                    class="goods-item"
                    :class="{'active':  item.id == useDesignerGood.activeGood?.id}"
                    v-for="item in goodsByType"
                    :key="item.id"
                    @click="switchGoods(item)"
                >
                    <view class="cover">
                        <image :src="item.image" mode="heightFix"></image>
                    </view>
                    <view class="good-detail">
                        <view class="good-title">{{ item.storeName }}</view>
                        <view class="colors">
                            <view class="label">衣服颜色</view>
                            <view class="color-ul">
                                <view
                                    class="color-li"
                                    v-for="color in item.bodyPosition"
                                    :key="color.id"
                                >
                                    <view
                                        class="color-box"
                                        :style="{
                                            backgroundColor: color.skuColorRgb,
                                        }"
                                    ></view>
                                    <view class="color-name">{{
                                        color.skuColorName
                                    }}</view>
                                </view>
                            </view>
                        </view>
                        <view class="colors">
                            <view class="label">定制区域</view>
                            <view class="color-ul position-ul">
                                <view
                                    class="position-li"
                                    v-for="pItem in item.bodyPosition"
                                    :key="pItem.id"
                                >
                                    <image
                                        class="position-img"
                                        :src="pItem.back"
                                    ></image>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </u-popup>
</template>
<script setup lang="ts">
import { computed, ref, unref, toRaw } from 'vue';
import { useDesignerGoodState } from "@/state/modules/DesignerGoodState";

const useDesignerGood = useDesignerGoodState();

const tabs = computed(() => {
    return useDesignerGood.categoryGoods?.map((item) => {
        return {
            name: item.cateName,
            id: item.id,
        };
    });
});

const current = ref<number>(4);
// 定义change事件回调函数
const change = (index: number) => {
    current.value = index;
};
const goodsByType = computed(() => {
    return useDesignerGood.categoryGoods?.[current.value]?.goods;
});

const switchGoods = (item) => {
  useDesignerGood.setActiveGood(toRaw(item));
};
const show = ref( false);
const open = () => {
  show.value = true;
};
defineExpose({
  open,
});
</script>

<style scoped lang="scss">
  .title {
    height: 42rpx;
    font-weight: bold;
    font-size: 32rpx;
    color: #222222;
    line-height: 42rpx;
    text-align: center;
    margin: 32rpx auto;
    padding: 20rpx 0;
  }

  .content {
    border-top: 1px solid #E4E4E4;
    padding: 20rpx 32rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .goods-item {
      display: flex;
      width: 686rpx;
      height: 318rpx;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 32rpx;
      margin: 0 auto 20rpx;
      gap: 20rpx;
      border: 2rpx solid transparent;
      &.active {
        border: 2rpx solid #F25A27;
      }
      .cover {
        image {
          width: 162rpx;
          height: 162rpx;
          background: #F3F7F8;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
        }
      }
      .good-detail {
        .good-title {
          height: 28rpx;
          font-weight: bold;
          font-size: 28rpx;
          color: #222222;
          line-height: 28rpx;
          text-align: left;
          margin: 8rpx 0;
        }
        .colors {
          .label {
            height: 32rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #222222;
            line-height: 32rpx;
          }
          .color-ul {
            display: flex;
            align-items: center;
            gap: 16rpx;
            width: 436rpx;
            height: 56rpx;
            background: #F3F7F8;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            padding: 16rpx;
            margin: 8rpx 0;
            .color-li {
              display: flex;
              align-items: center;
              gap: 8rpx;
              .color-box {
                width: 24rpx;
                height: 24rpx;
                border-radius: 50%;
                margin-right: 4rpx;
              }

            }

          }
          .position-ul {
            display: flex;
            align-items: center;
            gap: 16rpx;
            height: 86rpx;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            .position-li {
              image.position-img {
                width: 70rpx;
                height: 60rpx;
              }
            }
          }
        }
      }
    }
  }
</style>
